<style>
    .rulelist {
        padding: 0 30px;
    }

    .rulelist .cailiao .select_box .ivu-select-single .ivu-select-selection {
        height: 36px !important;
    }

    .rulelist .cailiao .inputBox[data-v-1191f9a4] {
        padding-left: 0 !important;
        border: none !important;
    }

    .rulelist .ivu-select-selection {
        border: 0;
        width: 100%;
        outline: none;
        border: none !important;
    }

    .rulelist .search .ivu-select-selection {
        overflow: hidden !important;
    }

    .search .ivu-select-multiple .ivu-select-selection {
        overflow: hidden !important;
    }

    .search .ivu-select-multiple .ivu-select-selection {
        overflow: hidden !important;
    }

    #rulelistmodal .ivu-modal-body .ivu-form-item label {
        text-align: center !important;
    }
</style>
<style scoped>
    .ivu-radio-group {
        width: 100% !important;
    }

    .cailiao {
        margin: 10px 0px 15px;
    }

    .cailiao::after {
        content: '';
        display: block;
        clear: both;
    }

    .cailiao span {
        float: left;
    }

    .cailiao span:first-child {
        display: inline-block;
        width: 20%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        border: 1px solid #A9A9A9;
        border-right: 0;
        text-align: center;
        vertical-align: middle;
        background-color: #FAFAFA;
        font-weight: 500;
    }

    .cailiao .inputBox {
        height: 36px;
        line-height: 34px;
        width: 80%;
        vertical-align: middle;
        padding-left: 5px;
        border: 1px solid #A9A9A9;
        display: inline-block;
    }

    .cailiao .select_box {
        padding: 0;
        border: none;
    }

    .cailiao .inputBox input {
        border: 0;
        width: 100%;
        outline: none;
        border: none;
    }

    .ivu-input-number:hover {
        border-color: red !important;
    }

    .ivu-input-number-focused {
        box-shadow: none !important;
    }

    .ivu-input-number {
        width: 100%;
        border: none !important;
    }
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="rulelist">
            <div>
                <h3 class="search-h3 huang"></h3>
            </div>
            <Row>
                <Col style="text-align:right" class="mb20">
                <Button type="success" icon="plus" size="large" @click="addlist">新增</Button>
                </Col>
            </Row>
            <Row>
                <div class="table-theme highlight_table">
                    <Table :columns="column" :data="data" size="large" stripe highlight-row border @on-current-change="tablecurrent"></Table>
                </div>
            </Row>
            <Row>
                <div id="footer" class="pt20">
                    <Col :md="24" :lg="12">
                    <div style="text-align:left;">
                        <Button type="primary" class="mr10" :disabled="tabledisabled" @click="everyupdate">编辑</Button>
                        <Button type="error" :disabled="tabledisabled" @click="remove">删除</Button>
                    </div>
                    </Col>
                </div>
            </Row>
        </div>
        <Modal v-model="modal1" title="规格列表" @on-ok="ok" @on-cancel="cancelmodal1" :mask-closable="false" :closable="false">
            <Row>
                <RadioGroup v-model="disabledGroup">
                    <template v-for="item in rule_list">
                        <Col span="12" class="mb10">
                        <Radio :label="item.id">
                            <span>{{item.name}}</span>
                        </Radio>
                        </Col>
                    </template>
                </RadioGroup>
            </Row>
        </Modal>

    </div>
</template>

<script>
    import productTitle from "../../components/productTitle";
    import util from '../../libs/util.js';
    import {
        get_all_rule,
        get_add_rule,
        get_rule_list,
        del_rule,
        get_rank
    } from '../../api/rule'
    import {
        parteGetByName
    } from '../../api/parter'
    export default {
        data() {
            return {
                addorupdate: true,
                del_id: "",
                templateId: '',
                rule_list: [],
                closeable: false, //shif按ese按钮退出
                value10: 20,
                oneyes: "", //首年度佣金还是续年度佣金 title
                oneyesno: false, //首年度佣金还是续年度佣金 模态框
                disabledGroup: "",
                modal1: false,
                p: 1,
                pagesize: 10,
                current: {},
                tabledisabled: true,
                total: 20,
                column: [{
                        type: "index",
                        title: "序号",
                        align: "center",
                        width: "80"
                    },
                    {
                        title: "规则名称",
                        align: "center",
                        key: "name"
                    },
                    {
                        title: "使用对象",
                        align: "center",
                        key: "rankSet",
                        render: (h, params) => {
                            let rankSet = params.row.rankName;
                            rankSet = rankSet.join()
                            return h('div', rankSet)
                        }
                    },
                    {
                        title: "是否已启用",
                        align: "center",
                        key: "enabled",
                        render: (h, params) => {
                            if (params.row.enabled == true || params.row.enabled == '1') {
                                params.row.enabled = '是'
                            }
                            if (params.row.enabled == false || params.row.enabled == '0') {
                                params.row.enabled = '否'
                            }
                            return h('div', {}, params.row.enabled)
                        }
                    },

                ],
                data: [],
                rank: [],
            };
        },
        components: {
            productTitle
        },
        created() {
            this.getList();
            this.ruleall();
            // this.getrank();
        },
        methods: {
            getrank() {
                new Promise((resolve, reject) => {
                    get_rank().then(res => {
                        if (res.data.err == 0) {} else {
                            this.$Message.success(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            addlist() {
                //新增按钮
                this.modal1 = true;
            },
            ok() {
                this.addorupdate = true;
                if (this.disabledGroup == "402880fd64a07ad60164a07aef000000") {
                    //新人底薪
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'couple',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef000000'
                        }
                    })
                } else if (this.disabledGroup == "402880fd64a07ad60164a07aef100001") {
                    //伯乐奖
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'bole',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100001'
                        }
                    })
                } else if (this.disabledGroup == "402880fd64a07ad60164a07aef100002") {
                    //人力奖
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'human',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100002'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100003") {
                    //平台将
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'platform',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100003'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100004") {
                    //育成奖
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'bred2',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100004'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100005") {
                    //管理奖
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'management',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100005'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100006") {
                    //创业奖
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'preneur',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100006'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100008") {
                    //续期佣金
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'renewal2',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100008'
                        }
                    })
                }else if (this.disabledGroup == "402880fd64a07ad60164a07aef100007") {
                    //续期佣金
                    this.disabledGroup = "";
                    this.$router.push({
                        name: 'phase',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100007'
                        }
                    })
                }
            },
            everyupdate() {
                var _this = this;
                _this.addorupdate = false;
                if (_this.current.templateId == "402880fd64a07ad60164a07aef000000") {
                    //新人底薪
                    _this.$router.push({
                        name: 'coupleUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef000000',
                            id: _this.current.id,
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100001") {
                    _this.$router.push({
                        name: 'boleUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100001',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100002") {
                    _this.$router.push({
                        name: 'humanUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100002',
                            id: _this.current.id
                        }
                    })
                } else if (_this.current.templateId == "402880fd64a07ad60164a07aef100003") {
                    _this.$router.push({
                        name: 'platformUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100003',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100004") {
                    _this.$router.push({
                        name: 'bredUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100004',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100005") {
                    _this.$router.push({
                        name: 'managementUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100005',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100006") {
                    _this.$router.push({
                        name: 'preneurUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100006',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100008") {
                    _this.$router.push({
                        name: 'renewalUpdate2',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100008',
                            id: _this.current.id
                        }
                    })
                }else if (_this.current.templateId == "402880fd64a07ad60164a07aef100007") {
                    _this.$router.push({
                        name: 'phaseUpdate',
                        params: {
                            tempalteId: '402880fd64a07ad60164a07aef100007',
                            id: _this.current.id
                        }
                    })
                }
            },
            cancelmodal1() {
                this.disabledGroup = "";
                this.modal1 = false;
            },
            tablecurrent(current, oldcurrent) {
                this.tabledisabled = false;
                this.current = current;
                this.del_id = this.current.id;
                console.log(this.current)
            },
            getList() {
                new Promise((resolve, reject) => {
                    get_all_rule().then(res => {
                        console.log(res, "..res")
                        if (res.data.err == 0) {
                            this.data = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            ruleall() {
                new Promise((resolve, reject) => {
                    get_rule_list().then(res => {
                        this.rule_list = res.data;
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            pagechange(val) {
                this.p = val;
            },
            pagesizechange(val) {
                this.p = 1;
                this.pagesize = val;
            },
            remove() {
                var _this = this;
                _this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var url = BASE_URL1 + '/kb/v1/rule/salary/config/' + this.del_id
                        util.ajax.delete(url, {})
                            .then(function (res) {
                                console.log(res.data.err)
                                if (res.data.err == 0) {
                                    _this.getList();
                                    this.tabledisabled = true;
                                }
                            })
                            .catch((res) => {
                                console.log(res)
                            })
                    },
                });
            },

        }
    };
</script>